You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Groundwork for EMBR-12823 (span links + related-logs attribute on the soft-nav performance span): before designing that, we need to see how soft-nav spans and logs overlap in time. This adds a developer-facing demo page that visualizes the SDK's live span/log stream as a waterfall.
Short description of the changes
New Waterfall demo page (demo/frontend/waterfall/) with a nav link after Playground. Soft-nav buttons (Home/A/B pushState), Info/Warn/Error log buttons, and the visualization.
Live capture via in-memory SpanExporter/LogRecordExporter added to the SDK's exporter chain (setupSDK gained optional extra-exporter params).
Waterfall viz: spans as bars colored by emb.type (session parts get the brand green), logs as severity-colored circles on a shared timeline; hide-network toggle; click a span to zoom to a fixed 1.5s window with horizontal scroll and ms ticks; cursor-following tooltips (edge-safe, with start/end/duration).
Sub-app deep-link fallback: a Vite dev/preview middleware that serves the right entry for hard loads like /waterfall/a, replacing the older root-index.html redirect script (which didn't cover the new page and dropped the sub-route).
All changes are demo-only (demo/frontend/); the published SDK is untouched.
How was this tested?
Driven manually in the dev server (:4847): navigate + emit logs, verified live rendering, per-type colors, click-to-zoom + horizontal scroll + reset, edge-safe tooltips.
Hard-nav verified for /waterfall/a, /soft/a, and a router demo deep link.
npm run lint + tsc pass via the pre-commit hook.
Ran the PR-review agent suite; addressed the correctness finding (unbounded Math.min(...) spread), exporter callback ordering, and a stale comment.
Checklist
Demo-only change; no SDK/public API impact
Lint + typecheck pass
Manually verified in the browser
Golden/integration tests — N/A (no SDK behavior change)
Difference in Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more about the Total Blocking Time metric.
Main Thread Time
+90.44 ms
Difference in Main Thread Time: Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work
Script Evaluation Time
+113.50 ms
Difference in Script Evaluation Time: Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to reduce Javascript execution time.
The reason will be displayed to describe this comment to others. Learn more.
💃
overbalance
changed the title
EMBR-12823 chore(demo): add live span/log waterfall page for soft nav
EMBR-12823 chore(demo): add live span/log waterfall page
Jul 8, 2026
overbalance
changed the title
EMBR-12823 chore(demo): add live span/log waterfall page
chore(demo): add live span/log waterfall page
Jul 8, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What problem is this solving?
Groundwork for EMBR-12823 (span links + related-logs attribute on the soft-nav performance span): before designing that, we need to see how soft-nav spans and logs overlap in time. This adds a developer-facing demo page that visualizes the SDK's live span/log stream as a waterfall.
Short description of the changes
Waterfalldemo page (demo/frontend/waterfall/) with a nav link after Playground. Soft-nav buttons (Home/A/B pushState), Info/Warn/Error log buttons, and the visualization.SpanExporter/LogRecordExporteradded to the SDK's exporter chain (setupSDKgained optional extra-exporter params).emb.type(session parts get the brand green), logs as severity-colored circles on a shared timeline; hide-network toggle; click a span to zoom to a fixed 1.5s window with horizontal scroll and ms ticks; cursor-following tooltips (edge-safe, with start/end/duration)./waterfall/a, replacing the older root-index.htmlredirect script (which didn't cover the new page and dropped the sub-route).All changes are demo-only (
demo/frontend/); the published SDK is untouched.How was this tested?
:4847): navigate + emit logs, verified live rendering, per-type colors, click-to-zoom + horizontal scroll + reset, edge-safe tooltips./waterfall/a,/soft/a, and a router demo deep link.npm run lint+tscpass via the pre-commit hook.Math.min(...)spread), exporter callback ordering, and a stale comment.Checklist